<template>
    <div>
        <el-card class="box-card">
            <div slot="header">
                <span>{{ $route.meta.title}}</span>
            </div>
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本信息" name="index">

                    <div class="panel-body">
                        <ul>
                            <li v-for="v in config">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                        <i :class="v.icon"> &nbsp;{{ v.name}} : </i>
                                        {{ v.config }}
                                    </el-col>
                                </el-row>
                            </li>
                        </ul>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="前端信息" name="api">

                    <div class="panel-body">
                        <ul>
                            <li v-for="v in api_config">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                        <i :class="v.icon"> &nbsp;{{ v.name}} : </i>
                                        {{ v.config }}
                                    </el-col>
                                </el-row>
                            </li>
                        </ul>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>


    export default {
        data() {
            return {
                activeName: 'index',
                config: [],
                api_config: []
            }
        },

        mounted() {
            this.$Api.getConfig({}, (c) => {
                if (c.code == 200) {
                    this.config = c.data
                }
            });

            this.api_config = [
                {
                    name: '项目名',
                    config: this.$Config.siteName,
                    icon: 'fa fa-home'
                },
                {
                    name: '前端框架',
                    config: 'Vue 2.0',
                    icon: 'fa fa-html5'
                },
                {
                    name: '前端UI框架',
                    config: 'Element UI 2.4.11',
                    icon: 'fa fa-css3'
                },
                {
                    name: '沙箱环境Api地址',
                    config: this.$Config.devUrl,
                    icon: 'fa fa-send'
                },
                {
                    name: '正式环境Api地址',
                    config: this.$Config.proUrl,
                    icon: 'fa fa-send'
                },
                {
                    name: 'Github',
                    config: this.$Config.gitHub,
                    icon: 'fa fa-github-alt'
                },
            ];

        },

        components: {}
    }
</script>
<style lang="less">
    .box-card {
        border-radius: 0;
        .panel-heading {
            display: flex;
            text-align: left;
            width: 100%;
            border-bottom: 1px solid #eeeff1;
            padding: 15px;
            font-weight: bold;
            img {
                margin-right: 15px;
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
            .title {
                display: flex;
                flex-direction: column;
                justify-content: center;
                .name {
                    color: #367fa9;
                    font-size: 18px;
                }
                .role {
                    color: #99a9c0;
                }
            }
        }
        .panel-body {
            color: #3c8dbc;
            ul {
                li {
                    border-bottom: 1px solid #eeeff1;
                    padding: 0 15px;
                    height: 45px;
                    line-height: 45px;
                }
            }
        }
    }
</style>
